<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '番茄钟',
  },
}
</route>
<template>
  <view class="pomodoro-page">
    <!-- 自定义导航栏 -->
    <view
      class="custom-nav-bar bg-white p-4 border-b border-gray-200 flex justify-between items-center"
      :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
    >
      <text class="text-xl font-semibold">番茄钟</text>
      <view class="flex space-x-4">
        <view class="text-gray-500" @click="navigateToHistory">
          <text class="i-fa-solid:history"></text>
        </view>
        <view class="text-gray-500" @click="navigateToStats">
          <text class="i-fa-solid:chart-bar"></text>
        </view>
      </view>
    </view>

    <!-- 番茄钟内容 -->
    <view class="p-4 flex-1 flex flex-col items-center justify-center">
      <!-- 时间显示 -->
      <view class="time-display">
        <text class="time-text">{{ formatTime(minutes) }}:{{ formatTime(seconds) }}</text>
      </view>

      <!-- 控制按钮 -->
      <view class="mt-8 flex space-x-6">
        <view
          class="control-button"
          :class="{ 'bg-gray-300': isRunning }"
          @click="isRunning ? pauseTimer() : startTimer()"
        >
          <text class="i-fa-solid:play text-white text-xl" v-if="!isRunning"></text>
          <text class="i-fa-solid:pause text-white text-xl" v-else></text>
        </view>
        <view class="control-button bg-red-500" @click="resetTimer">
          <text class="i-fa-solid:redo text-white text-xl"></text>
        </view>
      </view>

      <!-- 模式选择 -->
      <view class="mt-10 w-full">
        <text class="text-lg font-medium mb-3 block">选择模式</text>
        <view class="mode-selector">
          <view
            class="mode-option"
            :class="{ active: selectedMode === 'work' }"
            @click="selectMode('work')"
          >
            <text class="i-fa-solid:briefcase mb-2"></text>
            <text>工作</text>
            <text class="text-xs text-gray-500">25分钟</text>
          </view>
          <view
            class="mode-option"
            :class="{ active: selectedMode === 'shortBreak' }"
            @click="selectMode('shortBreak')"
          >
            <text class="i-fa-solid:coffee mb-2"></text>
            <text>短休息</text>
            <text class="text-xs text-gray-500">5分钟</text>
          </view>
          <view
            class="mode-option"
            :class="{ active: selectedMode === 'longBreak' }"
            @click="selectMode('longBreak')"
          >
            <text class="i-fa-solid:bed mb-2"></text>
            <text>长休息</text>
            <text class="text-xs text-gray-500">15分钟</text>
          </view>
        </view>
      </view>

      <!-- 当前任务 -->
      <view class="mt-8 w-full">
        <text class="text-lg font-medium mb-3 block">当前任务</text>
        <view
          class="task-selector bg-white rounded-lg p-4 shadow-sm flex justify-between items-center"
        >
          <text v-if="currentTask">{{ currentTask }}</text>
          <text class="text-gray-400" v-else>选择一个任务...</text>
          <text class="i-fa-solid:chevron-right text-gray-400"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'PomodoroPage',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 番茄钟状态
const minutes = ref(25)
const seconds = ref(0)
const isRunning = ref(false)
const selectedMode = ref('work')
const currentTask = ref('')
let timerInterval: number | null = null

// 导航到历史记录页面
const navigateToHistory = () => {
  uni.navigateTo({
    url: '/pages/pomodoro/history',
  })
}

// 导航到统计页面
const navigateToStats = () => {
  uni.navigateTo({
    url: '/pages/pomodoro/stats',
  })
}

// 格式化时间，确保两位数显示
const formatTime = (time: number) => {
  return time < 10 ? `0${time}` : `${time}`
}

// 开始计时器
const startTimer = () => {
  if (isRunning.value) return

  isRunning.value = true
  timerInterval = setInterval(() => {
    if (seconds.value > 0) {
      seconds.value--
    } else if (minutes.value > 0) {
      minutes.value--
      seconds.value = 59
    } else {
      // 计时结束
      clearInterval(timerInterval!)
      isRunning.value = false
      uni.vibrateLong() // 震动提醒
      uni.showToast({
        title: '时间到！',
        icon: 'success',
      })
    }
  }, 1000) as unknown as number
}

// 暂停计时器
const pauseTimer = () => {
  if (!isRunning.value) return

  clearInterval(timerInterval!)
  isRunning.value = false
}

// 重置计时器
const resetTimer = () => {
  clearInterval(timerInterval!)
  isRunning.value = false

  // 根据当前模式设置时间
  switch (selectedMode.value) {
    case 'work':
      minutes.value = 25
      break
    case 'shortBreak':
      minutes.value = 5
      break
    case 'longBreak':
      minutes.value = 15
      break
  }
  seconds.value = 0
}

// 选择模式
const selectMode = (mode: string) => {
  if (isRunning.value) {
    uni.showModal({
      title: '提示',
      content: '计时器正在运行，切换模式将重置计时器，是否继续？',
      success: (res) => {
        if (res.confirm) {
          selectedMode.value = mode
          resetTimer()
        }
      },
    })
  } else {
    selectedMode.value = mode
    resetTimer()
  }
}

// 页面卸载时清除计时器
onUnload(() => {
  if (timerInterval) {
    clearInterval(timerInterval)
  }
})
</script>

<style lang="scss">
.pomodoro-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f2f2f7;
}

.time-display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 280px;
  border: 10px solid #007aff;
  border-radius: 140px;
}

.time-text {
  font-size: 60px;
  font-weight: 300;
  color: #007aff;
}

.control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: #007aff;
  border-radius: 35px;
}

.mode-selector {
  display: flex;
  justify-content: space-between;
}

.mode-option {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin: 0 4px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mode-option.active {
  color: white;
  background-color: #007aff;
}

.mode-option.active .text-gray-500 {
  color: rgba(255, 255, 255, 0.7);
}
</style>
